

/**
* Class CanvasManager
*/
function CanvasManager(){
	
	// Attributes
	
	this.frontCanvas = null;
	
	this.backCanvas = null;
	
	this.layoutCanvas = null;
	
	this.stencil = null;
	
	this.backGroundColor = new Color(255, 255, 255, 1);
	
	this.redrawer = new Redrawer();
	
	this.getRedrawer = function(){
		return this.redrawer;
	}
	
										
										
	this.getFrontCanvas = function(){
		return this.frontCanvas;
	};
	
	this.setFrontCanvas = function(fcanvas){
		this.frontCanvas = fcanvas;
	};
	
	this.getBackCanvas = function(){
		return this.backCanvas;
	};
	
	this.setBackCanvas = function(bcanvas){
		this.backCanvas = bcanvas;
	};
	
	this.getLayoutCanvas = function(){
		return this.layoutCanvas;
	};
	
	this.setLayoutCanvas = function(lcanvas){
		this.layoutCanvas = lcanvas;
	};
	
	this.addLayout = function(){
	}
	
	
	//========================================
	// Constructor
	//========================================
	
	this.setFrontCanvas(new Canvas(document.getElementById("front_canvas"), 
										document.getElementById("front_canvas").getContext("2d")));
	
	this.setBackCanvas(new Canvas(document.getElementById("back_canvas"), 
										document.getElementById("back_canvas").getContext("2d")));
										
	this.setLayoutCanvas(new Canvas(document.getElementById("layout_canvas"), 
										document.getElementById("layout_canvas").getContext("2d")));
										
	

	//========================================
	// Clearing operations
	//========================================
	
	this.clearCanvas = function(x, y, width, height, canvas){
		canvas.getContext().clearRect(x, 
									  y,
									  width,
									  height);
	}
	
	//========================================
	// Drawing operations
	//========================================
	
	this.drawPoint = function(shape, indexPoint, canvas){
		/*
		this.getBackCanvas().getContext().strokeStyle = interfaces.getColor().toString();
		this.getBackCanvas().getContext().lineWidth = interfaces.getThickness();
		this.getBackCanvas().getContext().lineJoin = "round";
		
		
		*/
		
		var line = true;

		canvas.getContext().beginPath();
		
		canvas.getContext().moveTo(shape.x[indexPoint], 
								   shape.y[indexPoint]);
		
		for (var i = 0 ; i < shape.breakPoints.length ; i++){
			if (indexPoint + 1 == shape.breakPoints[i]){
				line = false;
			}
		}
		if (line){
			canvas.getContext().lineTo(shape.x[indexPoint+1], 
									   shape.y[indexPoint+1]);
		}
		
		canvas.getContext().closePath();
		canvas.getContext().stroke();			
	}
	
	
	this.drawShape = function(shape, canvas, clear){
		
		if (clear){
			this.clearCanvas(0,
							 0,
							 canvas.getCanvas().width,
							 canvas.getCanvas().height,
							 canvas);
		}
		
		canvas.getContext().strokeStyle = shape.getColor().toString();
		canvas.getContext().lineWidth = shape.getThickness();
		canvas.getContext().lineJoin = "round";
		
		
		
		
		// Fast version
		/*for (var i = 0 ; i < shape.x.length ; i++){
			this.drawPoint(shape, i, canvas);
		}*/
		
		// AA Version (smooth edges) for better machines
		
		canvas.getContext().beginPath();
		canvas.getContext().moveTo(shape.x[0], shape.y[0]);
		
		//canvas.getContext().moveTo(shape.x[minX], shape.y[minY]);
		
		
		for (var i = 1; i < shape.x.length - 2; i++) {
		
			var c = (shape.x[i] + shape.x[i+1]) / 2;
			var d = (shape.y[i] + shape.y[i+1]) / 2;
		 
			canvas.getContext().quadraticCurveTo(shape.x[i], shape.y[i], c, d);
		}
		 
		// For the last 2 points
		canvas.getContext().quadraticCurveTo(
			shape.x[i],
			shape.y[i],
			shape.x[i+1],
			shape.y[i+1]
		);
		canvas.getContext().stroke();
	}
	
	this.drawCanvas = function(data, canvas){
		for (var i = 0 ; i < data.length ; i++)
		{
			this.drawShape(data[i], canvas, false);
			console.log(data[i].getColor().toString());
		}
	}
	
	this.drawOptimisedShape = function(shape, canvas){
				
		canvas.getContext().drawImage(shape.getCacheCanvas().getCanvas(),
									  shape.getRealX(),
									  shape.getRealY());
	}
	
	this.drawOptimisedCanvas = function(data, canvas, exception){
	
		this.clearCanvas(0,
						 0,
						 this.frontCanvas.getCanvas().width,
						 this.frontCanvas.getCanvas().height,
						 this.frontCanvas);
						 
		this.clearCanvas(0,
						 0,
						 this.backCanvas.getCanvas().width,
						 this.backCanvas.getCanvas().height,
						 this.backCanvas);
		
		for (var i = 0 ; i < data.length ; i++){
			if (i != exception){
				this.drawOptimisedShape(data[i], canvas)
			}
		}
	}
	
	this.setCursorStyle = function(style){	
	
		this.getFrontCanvas().getCanvas().style.cursor = style;
		this.getBackCanvas().getCanvas().style.cursor = style;
	}
	
	this.setBackgroundColor = function(interfaces, data){
		
		
		this.backGroundColor = interfaces.getColor();
		
		interfaces.setBackgroundColor(this.backGroundColor);
		
		// Setting the color
		
		
		this.backCanvas.getContext().fillStyle = this.backGroundColor.toString();
		
		this.frontCanvas.getContext().fillStyle = this.backGroundColor.toString();
		
		// Filling
		this.backCanvas.getContext().fillRect(0, 
											   0,
											   this.backCanvas.getCanvas().width,
											   this.backCanvas.getCanvas().height);
											   
		this.frontCanvas.getContext().fillRect(0, 
											   0,
											   this.backCanvas.getCanvas().width,
											   this.backCanvas.getCanvas().height);
		
		// Updating
		this.drawOptimisedCanvas(data, this.getBackCanvas(), null);
	}
	
	this.loadLayout = function(){
	
		this.stencil = new Image(document.getElementById('loadLayoutButton').value);
		
		console.log(document.getElementById('loadLayoutButton').value);
		this.getLayoutCanvas().getContext().drawImage(this.stencil, 0, 0);
	}
	
	//==========================================================================================
	// Redrawer section
	//==========================================================================================
	
	this.started = false;
	
	this.paused = false;
	
	this.setStarted = function(state){
		this.started = state;
	}
	
	this.isStarted = function(){
		return this.started;
	}
	
	this.setPaused = function(state){
		this.paused = state;
	}
	
	this.isPaused = function(){
		return this.paused;
	}
	
	this.startRedrawer = function(){
		this.setStarted(true);
	}
	
	this.stopRedrawer = function(){
		this.setStarted(false);
	}
	
	this.pauseRedrawer = function(){
		this.setPaused(true);
	}
	
	this.unPauseRedrawer = function(){
		this.setPaused(false);
	}
	
	this.realRedraw = function(){
		
	}
	
}